import { Button, Card, ProgressBar, Stack } from "react-bootstrap";
import { currencyFormatter } from "../utils";



export default function BudgetCard(props) {
    const classNames = [];
    if (props.amount > props.max) {
        classNames.push("bg-danger", "bg-opacity-10")
    } else if (props.grey) {
        classNames.push("bg-light");
    }

    return (
        <Card className={classNames.join(" ")}>
            <Card.Body>
                <Card.Title className="d-flex justify-content-between align-items-baseline fw-normal mb-3">
                    <div className="me-2">{props.name}</div>
                    <div className="d-flex align-items-baseline"> {currencyFormatter.format(props.amount)}
                        {props.max && (<span className="text-muted fs-6 ms-1">/{currencyFormatter.format(props.max)}</span>)}
                    </div>
                </Card.Title>
                {props.max &&
                    <ProgressBar
                        className="rounded-pill"
                        variant={getProgressBarVariant(props.amount, props.max)}
                        min={0}
                        max={props.max}
                        now={props.amount}
                    />}
                {!props.hideButton && (
                    <Stack direction="horizontal" gap={2} className="mt-4">
                        <Button variant="outline-primary" className="ms-auto" onClick={props.onAddExpenseClick}>Add Expense</Button>
                        <Button variant="outline-secondary" onClick={props.onViewExpensesClick}>View Expense</Button>
                    </Stack>
                )}

            </Card.Body>
        </Card>
    )
}

function getProgressBarVariant(amount, max) {
    const percent = amount / max;
    if (percent < 0.5) return "primary";
    if (percent < 0.75) return "warning";
    return "danger"
}